<template>
  <div class="ignore">
    <div class="wp">
      <div class="head">目录</div>
      <div class="line"></div>
      <div class="list">
        <div class="li" v-for="item of children" :key="item.path">
          <router-link class="a" :to="item.path" hover-class="hover">
            {{ item.meta.title }}</router-link
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      children: [{ //首页
        path: '/',
        name: 'home',
        meta: {
          pos: 4,
          title: '首页'
        }
      }, { //环境信息
        path: '/environmentalInfo',
        name: 'environmentalInfo',
        meta: {
          pos: 0,
          title: '环境信息'
        }
      }, { //畜产品价格
        path: '/animalPrice',
        name: 'animalPrice',
        meta: {
          pos: 6,
          title: '畜产品价格'
        }
      }, { //技术服务
        path: '/technology',
        name: 'technology',
        meta: {
          pos: 7,
          title: '技术服务'
        }
      }, { //视频监控
        path: '/monitor',
        name: 'monitor',
        meta: {
          pos: 1,
          title: '视频监控'
        }
      }, { //预警信息
        path: '/warning',
        name: 'warning',
        meta: {
          pos: 5,
          title: '预警信息'
        }
      }, { //主推技术
        path: '/primaryTechnology',
        name: 'primaryTechnology',
        meta: {
          pos: 8,
          title: '主推技术'
        }
      }, { //粮种信息
        path: '/grainSeedMessage',
        name: 'grainSeedMessage',
        meta: {
          pos: 4,
          title: '粮种信息'
        }
      }, { //粪肥管理
        path: '/manureManagement',
        name: 'manureManagement',
        meta: {
          pos: 2,
          title: '粪肥管理'
        }
      }, { //微生物
        path: '/microorganism',
        name: 'microorganism',
        meta: {
          pos: 3,
          title: '微生物'
        }
      }, { //设置中心-详情
        path: '/baseInfo',
        name: 'baseInfo',
        meta: {
          title: '设置中心-详情',
        }
      }, { //设置中心-详情-人员信息
        path: '/userInfo',
        name: 'userInfo',
        meta: {
          title: '设置中心-详情-人员信息',
        }
      }, { //设置中心-详情-人员信息-新建编辑
        path: '/userInfoEdit',
        name: 'userInfoEdit',
        meta: {
          title: '设置中心-详情-人员信息-新建编辑',
        }
      }, { //设置中心-详情-摄像头信息
        path: '/cameraInfo',
        name: 'cameraInfo',
        meta: {
          title: '设置中心-详情-摄像头信息',
        }
      }, { //设置中心-详情-设备信息
        path: '/deviceInfo',
        name: 'deviceInfo',
        meta: {
          title: '设置中心-详情-设备信息',
        }
      }, { //设置中心-详情-预警信息
        path: '/warningInfo',
        name: 'warningInfo',
        meta: {
          title: '设置中心-详情-预警信息',
        }
      }, { //设置中心-养殖场管理
        path: '/farmManagement',
        name: 'farmManagement',
        meta: {
          title: '设置中心-养殖场管理'
        }
      }, { //设置中心-人员管理
        path: '/personManagement',
        name: 'personManagement',
        meta: {
          title: '设置中心-人员管理'
        }
      }, { //登录
        path: '/login',
        name: 'login',
        meta: {
          title: '登录'
        }
      }]
    }
  }
}
</script>

<style scoped>
.a {
  color: #026eba;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.a:visited {
  color: #999;
}

.hover {
  background: #2ea1f2;
  color: #fff;
}

.wp {
  margin: 0 auto;
  width: 480px;
  min-width: 320px;
  min-height: 100%;
  background: #fff;
}

.head {
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  background: url();
}

.line {
  margin: 1px 0;
  height: 2px;
  background: url();
}

.list,
.list .li {
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align: left;
  list-style: none;
}

.list .a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
}

@media only screen and (max-width: 480px) {
  .wp {
    width: 100%;
  }
}
</style>
